import scss from '../assets/styles/common.module.scss'
import {
    Button,
    Input,
    Select,
    InputNumber
} from "antd";
import 'antd/dist/antd.css';

export const MIcon = (
    { url, onClick }: any
) => {
    return <div>
        <img
            className={scss['c-icon']}
            onClick={onClick}
            src={url}
            alt={"icon"}
        />
    </div>
}


export const ModalIcon = (sub: any) => {

    let { defaultValue } = sub;
    let open = [
        { name: "文本", value: 0, status: false },
        { name: "图片", value: 1, status: true },
        { name: "视频", value: 2, status: true },
        { name: "监控", value: 3, status: false },
        { name: "外链", value: 4, status: true },
    ];
    let IocnStyle = (e: any) => {
        return `${process.env.PUBLIC_URL}images/icon/${e}.svg`
    }


    return <div
        className={scss['c-modal']}
    >
        <span
            className={scss['c-modal-title']}
        >
            点位绘制
        </span>
        <div
            className={scss['c-modal-icon']}
        >
            <div>
                <span>点位名称</span>
                <Input
                    value={sub.defaultValue.text || ''}
                    placeholder={'请输入'}
                    onChange={(e) => {
                        sub.setName(e.target.value)
                    }} />
            </div>
            <div>
                <span>文字颜色</span>
                <div>
                    <span onClick={() => { sub.setColor('#E21F1C') }}></span>
                    <span onClick={() => { sub.setColor('#02398D') }}></span>
                    <span onClick={() => { sub.setColor('#42D8B4') }}></span>
                    <span onClick={() => { sub.setColor('#F8B402') }}></span>
                </div>
            </div>
            <div>
                <span>经度</span>
                <InputNumber
                    min={0}
                    max={180}
                    value={sub.defaultValue.longitude}
                    onStep={(value) => { sub.setGeometry(value, "longitude") }}
                    onChange={(value) => { sub.setGeometry(value, "longitude") }}
                    step={0.000001}
                />

            </div>
            <div>
                <span>纬度</span>
                <InputNumber
                    min={0}
                    max={180}
                    value={sub.defaultValue.latitude}
                    onStep={(value) => { sub.setGeometry(value, "latitude") }}
                    onChange={(value) => { sub.setGeometry(value, "latitude") }}
                    step={0.000001}
                />
            </div>
            <div>
                <span>图标样式</span>
                <div>
                    <img
                        src={IocnStyle("blue")} alt=""
                        onClick={() => sub.setIcon(IocnStyle("blue"))}
                    />
                    <img
                        src={IocnStyle("green")} alt=""
                        onClick={() => sub.setIcon(IocnStyle("green"))}
                    />
                    <img
                        src={IocnStyle("red")} alt=""
                        onClick={() => sub.setIcon(IocnStyle("red"))}
                    />
                    <img
                        src={IocnStyle("yellow")} alt=""
                        onClick={() => sub.setIcon(IocnStyle("yellow"))}
                    />
                    <span className={scss['c--area']}>|</span>
                    <img
                        src={IocnStyle("monitor")} alt=""
                        onClick={() => sub.setIcon(IocnStyle("monitor"))}
                    />

                </div>
            </div>
            <div>
                <span>点位信息</span>
                <div>
                    <Select
                        style={{ width: "4vw", height: '80%' }}
                        value={defaultValue.type - 1}
                        onChange={(value) => sub.setInputStatus(value)}
                    >
                        {
                            open.map((item, index) => {
                                return (
                                    <Select.Option
                                        value={item.value}
                                        disabled={item.status}

                                    >{item.name}</Select.Option>
                                )
                            })
                        }
                    </Select>
                </div>
            </div>


            <div
                className={scss['area-text']}
                style={{ display: !sub.pointEditStatus[0] ? 'none' : 'block' }}
            >
                <textarea onChange={(e) => {
                    sub.setPoint(e.target.value, "text")
                }}>

                </textarea>
            </div>
            <div
                className={scss['area-text']}
                style={{ display: !sub.pointEditStatus[1] ? 'none' : 'block' }}
            >
                <textarea onChange={(e) => {
                    sub.setPoint(e.target.value, "text")
                }}>

                </textarea>
            </div>
            <div
                className={scss['area-text']}
                style={{ display: !sub.pointEditStatus[2] ? 'none' : 'block' }}
            >
                <textarea onChange={(e) => {
                    sub.setPoint(e.target.value, "text")
                }}>

                </textarea>
            </div>
            <div
                className={scss['area-text']}
                style={{ display: !sub.pointEditStatus[3] ? 'none' : 'block' }}
            >
                <textarea onChange={(e) => {
                    sub.setPoint(e.target.value, "monitor")
                }}
                    placeholder="请输入监控朝向，例：90"
                    value={defaultValue.content ? defaultValue.content : ''}
                >

                </textarea>
            </div>

            <div>
                <Button
                    type={'primary'}
                    onClick={sub.savePoint}
                >确认</Button>
                <Button onClick={sub.deletePoint}>删除</Button>
            </div>
        </div>
    </div>
}

